<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Modal事件</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="author" content="http://www.huayingsoft.com/" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrapEx.css">

    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapEx2.0.js"></script>
</head>
<body>
        <span style='font-size:20px;font-weight:bold;'>Modal事件</span>
        <p/>
        <p/>
        <button id="btn1" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">Modal1 绘制显示事件</button>
        <p/>
        <button id="btn2" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">Modal2 关闭事件</button>
        <p/>
</body>
<script>
    var Modal1;//绘制显示事件
    var Modal2;//关闭事件
    $(document).ready(function () {
        InitModal1();
        InitModal2();
        //显示
        $("#btn1").click(function () {
            Modal1.body = "Hello World";//内容
            Modal1.show();
        })
        //最大化
        $("#btn2").click(function () {
            Modal2.show();
        })
    });
   //Hello World 设置窗口大小
    function InitModal1() {
        $(document.body).append('<div id="modal1"></div>');

        Modal1 = new bsEx.Modal({
            id:"modal1",//ID
            renderto:"#modal1",//绘制
            initMax:false,//最大化
            oninited:function(m){
                alert(m.id + "绘制完成 三种事件注册方式 第一种");
            },
            onbeforeshow:function(m){
                alert(m.id + "开始显示");
            }
        });
        
        //另一种注册方法
        Modal1.on("showed",function(m){
            alert(m.id + "显示完成  三种事件注册方式 第二种");
        });
        
    }

    function InitModal2(){
        $(document.body).append('<div id="modal2"></div>');

        Modal2 = new bsEx.Modal({
            id:"modal2",//ID
            renderto:"#modal2",//绘制
            initMax:true,//最大化
            body:"Hello World",
            btns:[{ id: "closebtn" }],//按钮组
            onbeforehide:function(m){
                alert(m.id + "开始关闭 三种事件注册方式 第一种");
            }
        });
        //另一种注册方法
        Modal2.on("hidden",function(m){
            alert(m.id + "关闭完成 三种事件注册方式 第二种");
        });
        window.modal2_hidden = function(){
            alert( "开始关闭 三种事件注册方式 第三种");
        }

        Modal2.on("alleve",function(name,arge){
            console.log("触发了"+name+"事件,"+$.fn.bsEx);
        })
    }

</script>
</html>